@import '../../../../config/config.less';

@css-prefix-table: ~"@{css-prefix}table";

.@{css-prefix-table} {
   &-column{
     &-radio{
       display: inline-block;
       width: 14px;
       height: 14px;
       position: relative;
       top: 0;
       left: 0;
       background-color: #fff;
       vertical-align: middle;
       border: 1px solid #dddee1;
       border-radius: 50%;
       transition: all 0.2s ease-in-out;
       &:after{
         position: absolute;
         width: 8px;
         height: 8px;
         left: 2px;
         top: 2px;
         border-radius: 6px;
         display: table;
         border-top: 0;
         border-left: 0;
         content: ' ';
         background-color: #3399ff;
         opacity: 0;
         transition: all 0.2s ease-in-out;
         transform: scale(0);
       }
       &-checked{
         border-color: #3399ff;
         &:after{
           opacity: 1;
           transform: scale(1);
           transition: all 0.2s ease-in-out;
         }
       }
       &-disabled{
         border-color: #dddee1;
         background-color: #f3f3f3;
         &:after{
           background-color: #cccccc;
         }
       }
     }
     &-checkbox{
       position: relative;
       width: 14px;
       height: 14px;
       display: inline-block;
       vertical-align: middle;
       cursor: pointer;
       &:before{
         content: "";
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         background-color: #fff;
         border: 1px solid #dddee1;
         border-radius: 2px;
       }
       &-checked{
         &:before{
           border: 1px solid #3399ff;
           background-color: #3399ff;
         }
         &:after{
           content: "";
           position: absolute;
           top: 4px;
           left: 3px;
           width: 8px;
           height: 4px;
           border-bottom: 2px solid #fff;
           border-left: 2px solid #fff;
           transform: rotate(-45deg);
         }
       }
       &-indeterminate{
         &:before{
           border: 1px solid #3399ff;
           background-color: #3399ff;
         }
         &:after{
           content: "";
           position: absolute;
           top: 4px;
           left: 3px;
           width: 8px;
           height: 4px;
           border-bottom: 2px solid #fff;
         }
       }
       &-disabled{
         &:before{
           border: 1px solid #dddee1;
           background-color: #f3f3f3;
         }
       }
     }
   }

    &filter {
      border: solid 1px @border-color-lighter;
      border-radius: 2px;
      background-color: #fff;
      box-shadow: @shadow-down;
      box-sizing: border-box;
      margin: 2px 0;
      /** used for dropdown mode */
      &__list {
        padding: 5px 0;
        margin: 0;
        list-style: none;
        min-width: 100px;
      }
      &__list-item {
         line-height: 36px;
         padding: 0 10px;
         cursor: pointer;
         font-size: @font-size-base;
         &:hover {
           background-color: @menu-dark-active-bg;
           color: @menu-dark-title;
         }

        &.is-active{
          background-color: @primary-color;
          color: @tooltip-color;
        }
      }

      &__content {
        min-width: 100px;
      }


      &__bottom  {
        border-top: 1px solid @border-color-lighter;
        padding: 8px;

        button {
          background: transparent;
          border: none;
          color: @text-color;
          cursor: pointer;
          font-size: @btn-font-size;
          padding: 0 3px;

          &:hover {
            color: @primary-color;
          }

          &:focus {
            outline: none;
          }

          &.is-disabled {
            color: @btn-disable-color;
            cursor: not-allowed;
          }
        }
      }

      &__checkbox-group {
        padding: 10px;

        label.@{css-prefix}checkbox {
          display: block;
          margin-bottom: 8px;
          margin-left: 5px;
        }

        .@{css-prefix}-checkbox:last-child {
          margin-bottom: 0;
        }
      }

    }
}
